<template>
  <div class="alarmStatistics">
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form">
      <el-form-item label="站点" prop="station">
        <el-select v-model="ruleForm.station" placeholder="请选择" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="电站1号" value="1"></el-option>
          <el-option label="电站2号" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单状态" prop="workOrderStatus">
        <el-select v-model="ruleForm.workOrderStatus" placeholder="请选择" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="待处理" value="1"></el-option>
          <el-option label="处理中" value="2"></el-option>
          <el-option label="已完成" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单类型" prop="workOrderType">
        <el-select v-model="ruleForm.workOrderType" placeholder="请选择" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="故障工单" value="1"></el-option>
          <el-option label="巡检工单" value="2"></el-option>
          <el-option label="维护工单" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单来源" prop="workOrderSource">
        <el-select v-model="ruleForm.workOrderSource" placeholder="请选择" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="APP" value="1"></el-option>
          <el-option label="PC" value="2"></el-option>
          <el-option label="微信" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button @click="submitForm(ruleFormRef)" type="primary">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <div class="content">
      <div class="statusBox"><img src="./pic1.png" width="100%" /></div>
      <div class="levelBox"><img src="./pic2.png" width="100%"  /></div>
      <div class="typeBox"><img src="./pic3.png" width="100%"  /></div>
      <div class="historyBox"><img src="./pic4.png" width="100%"  /></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import type { TableColumnCtx, TableInstance, FormInstance } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  station: '',
  workOrderStatus: '',
  workOrderType: '',
  workOrderSource: ''
})
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="scss" scoped>
.alarmStatistics {

  :deep(.conditions-form) {
    display: flex;
    padding: 0.12rem 0.16rem;
    background: #fff;

    .el-form-item {
      margin-bottom: 0;
      margin-right: 0.4rem;

      .el-form-item__label {
        padding-right: 4px;
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 0.16rem;
      }

      .el-form-item__content {
        height: 0.4rem;

        .el-select__wrapper {
          width: 2rem;
          height: 0.4rem;
          font-size: 0.14rem;
        }

        .el-button {
          height: 0.4rem;
          line-height: 0.4rem;
          font-size: 0.14rem;
          color: #046AF9;
          border-color: #046AF9;
          background: #CDE1FE;
        }

        .el-button--primary {
          background: #046AF9;
          color: #fff;
        }

      }
    }

    .el-form-item:last-child {
      margin-left: auto;
      margin-right: 0;
    }
  }
  .content{
    margin-top: 0.12rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .statusBox,.levelBox,.typeBox,.historyBox{
      width: 8.1rem;
      height: 4.67rem;
      background: #fff;
      margin-bottom: 0.12rem;
    }
  }
}
</style>
